<template>
  <div class="emr-container">
    <div class="emr-content">
      <div class="header-title">患者列表</div>
      <el-divider></el-divider>
      <pagination-table :listData="listData">
        <XMTableColumn label="姓名" prop="areaName"></XMTableColumn>
        <XMTableColumn label="时间" prop="areaCode"></XMTableColumn>
        <XMTableColumn label="操作">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="showHospitals(scope)"
            >
              数据详情
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="showHospitalInfo(row)"
            >
              病例详情
            </el-button>
          </template>
        </XMTableColumn>
      </pagination-table>
    </div>
  </div>
</template>

<script>
  import PaginationTable from '@/components/PaginationTable'
  import { getAutherList } from '@/api/setting'
  // import { onMounted } from '@vue/runtime-core'
  export default {
    components: { PaginationTable },
    data() {
      return {
        listData: {
          totalRecords: 3,
          data: [
            { areaName: '1', areaCode: '1' },
            { areaName: '2', areaCode: '2' },
          ],
        },
      }
    },
    setup() {
      // onMounted(() => {
      //   this.loadData()
      // })
    },
    methods: {
      async loadData() {
        console.log('loadData pre')
        const ret = await getAutherList()
        console.log('loadData = ' + JSON.stringify(ret))
      },
    },
  }
</script>

<style lang="scss" scoped>
  .emr-container {
    padding: 32px;

    .emr-content {
      background-color: white;
      overflow: hidden;
      .header-title {
        margin-top: 20px;
        margin-left: 11px;
      }

      .el-divider--horizontal {
        margin: 12px 2px;
      }
    }
  }
</style>
